<template>
  <view class="home">
    <!-- <view class="header">
      <view class="left">
        <view class="x-icon">
          <span class="iconfont icon-cuowu"></span>
        </view>
      </view>
      <view class="hearder-title">内蒙古自治区“双随机”</view>
      <view class="right">
        <view class="x-icon">
          <span class="iconfont icon-caidan_2"></span>
        </view>
      </view>
    </view> -->
    <view class="main" :v-model="State">
      <view class="content">
        <span class="title">级别</span>
        <span class="info">
			<el-input v-model="header.jibie" placeholder="请输入内容"></el-input>
		</span>
      </view>
      <view class="content">
        <span class="title">检查形式</span>
        <span class="info">
			<el-input v-model="header.jcxs" placeholder="请输入内容"></el-input>
		</span>
      </view>
      <view class="content">
        <span class="title">消防监督检察员</span>
        <span class="info">
			<el-input v-model="header.xfjd" placeholder="请输入内容"></el-input>
		</span>
      </view>
      <view class="content">
        <span class="title">检查时间</span>
        <span class="info">
			<el-input v-model="header.jcsj" placeholder="请输入内容"></el-input>
		</span>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防许可及验收备案</view>
          <view class="down-top">
            <span
              :class="Statetype"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info"></view>
      </view>
      <view :class="one.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content" @click="one.state = !one.state">
          <view class="menu-title">消防安全管理</view>
          <view class="down-top">
            <text
              :class="one.state? 'down': 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></text>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">消防安全制度</span>
              <span class="info">
				  <el-select v-model="one.xfaq" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">灭火及应急疏散预案</span>
              <span class="info">
				  <el-select v-model="one.mhhy" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">员工消防安全培训</span>
              <span class="info">
				  <el-select v-model="one.ygxf" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">消防安全管理人</span>
              <span class="info">
				  <el-select v-model="one.xfaqglr" placeholder="请选择">
				      <el-option
				        v-for="item in options_Three"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">防火检查、巡查</span>
              <span class="info">
				  <el-input v-model="one.fhjc" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">消防设施、器材、消防安全标志定期组织维修保养</span>
              <span class="info">
				  <el-select v-model="one.xfss" placeholder="请选择">
				      <el-option
				        v-for="item in options_Two"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">消防演练</span>
              <span class="info">
				  <el-select v-model="one.xfyl" placeholder="请选择">
				      <el-option
				        v-for="item in options_Two"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">消防档案</span>
              <span class="info">
				  <el-select v-model="one.xfda" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">消防重点部位</span>
              <span class="info">
				  <el-select v-model="one.xfzd" placeholder="请选择">
				      <el-option
				        v-for="item in options_Three"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">承担灭火和组织疏散任务的人员</span>
              <span class="info">
				  <el-select v-model="one.zdmh" placeholder="请选择">
				      <el-option
				        v-for="item in options_Three"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">其他情况</span>
              <span class="info">
				  <el-input
				    type="textarea"
				    :autosize="{ minRows: 2}"
				    placeholder="请输入内容"
				    v-model="one.textarea2">
				  </el-input>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
						<el-upload
						  action="https://jsonplaceholder.typicode.com/posts/"
						  list-type="picture-card"
						  :on-preview="handlePictureCardPreview"
						  :on-remove="handleRemove">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
						  <img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="two.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content" @click="two.state = !two.state">
          <view class="menu-title">建筑防火</view>
          <view class="down-top">
            <span
              :class="two.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">生产、储存、经营易燃易爆危险品的场所与居住场所设置在同一建筑物内</span>
              <span class="info">
				  <el-select v-model="two.sccc" placeholder="请选择">
				      <el-option
				        v-for="item in options_One"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title"
                >生产、存储、经营其他物品的场所与居住场所设置在同一建筑物内</span
              >
              <span class="info">
				  <el-select v-model="two.sccctwo" placeholder="请选择">
				      <el-option
				        v-for="item in options_One"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title"
                >人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物</span
              >
              <span class="info">
				  <el-select v-model="two.rymj" placeholder="请选择">
				      <el-option
				        v-for="item in options_One"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">消防车通道</span>
              <span class="info"><el-input v-model="two.xfct" placeholder="请输入内容"></el-input></span>
            </li>
            <li>
              <span class="title">防火间距</span>
              <span class="info">
				  <el-input v-model="two.xfjd" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">防火分区</span>
              <span class="info">
				  <el-input v-model="two.fhfq" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">人员密集场所装修材料：</span>
              <span class="info">
				  <el-select v-model="two.rymjtwo" placeholder="请选择">
				      <el-option
				        v-for="item in options_One"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info">
				<el-input
				  type="textarea"
				  :autosize="{ minRows: 2}"
				  placeholder="请输入内容"
				  v-model="two.textarea2">
				</el-input>
			</span>
            </li>
            <li>
              <span class="title">应急广播</span>
              <span class="info">
				  <el-select v-model="value" placeholder="请选择">
				      <el-option
				        v-for="item in options"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
						<el-upload
						  action="https://jsonplaceholder.typicode.com/posts/"
						  list-type="picture-card"
						  :on-preview="handlePictureCardPreview"
						  :on-remove="handleRemove">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
						  <img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="three.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content"  @click="three.state = !three.state">
          <view class="menu-title">安全疏散</view>
          <view class="down-top">
            <span
              :class="three.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">疏散通道</span>
              <span class="info">
				  <el-input v-model="three.sstd" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">安全出口</span>
              <span class="info">
				  <el-input v-model="three.aqck" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">应急照明</span>
              <span class="info">
				  <el-input v-model="three.yjzm" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">疏散指示标志</span>
              <span class="info">
				  <el-input v-model="three.sszs" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">避难层：</span>
              <span class="info">
				  <el-select v-model="three.bnc" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">应急广播</span>
              <span class="info">
				  <el-select v-model="three.yjgb" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info">
				  <el-input
				    type="textarea"
				    :autosize="{ minRows: 2}"
				    placeholder="请输入内容"
				    v-model="three.textarea2">
				  </el-input>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
						<el-upload
						  action="https://jsonplaceholder.typicode.com/posts/"
						  list-type="picture-card"
						  :on-preview="handlePictureCardPreview"
						  :on-remove="handleRemove">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
						  <img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
            </view>
          </view>
        </view>
      </view>
     <view :class="four.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
       <view class="menu-content content"  @click="four.state = !four.state">
          <view class="menu-title">消防控制室</view>
          <view class="down-top">
            <span
              :class="four.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">消防控制室</span>
              <span class="info">
				  <el-select v-model="four.xfkzs" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
						<el-upload
						  action="https://jsonplaceholder.typicode.com/posts/"
						  list-type="picture-card"
						  :on-preview="handlePictureCardPreview"
						  :on-remove="handleRemove">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
						  <img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="five.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content"  @click="five.state = !five.state">
          <view class="menu-title">消防设施器材-火灾自动报警装置</view>
          <view class="down-top">
            <span
              :class="five.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">火灾自动报警系统</span>
              <span class="info">
				  <el-select v-model="five.hzzd" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">探测器</span>
              <span class="info">
				  <el-input v-model="five.tcq" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">手动报警器</span>
              <span class="info">
				  <el-input v-model="five.sdbj" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">控制设备</span>
              <span class="info">
				  <el-input v-model="five.kzsb" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">其他设施</span>
              <span class="info">
				  <el-input v-model="five.qtss" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">抽查部位</span>
              <span class="info">
				  <el-input v-model="five.ccbw" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info">
				  <el-input
				    type="textarea"
				    :autosize="{ minRows: 2}"
				    placeholder="请输入内容"
				    v-model="five.textarea2">
				  </el-input>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
						<el-upload
						  action="https://jsonplaceholder.typicode.com/posts/"
						  list-type="picture-card"
						  :on-preview="handlePictureCardPreview"
						  :on-remove="handleRemove">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
						  <img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="six.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content"  @click="six.state = !six.state">
          <view class="menu-title">消防设施器材-消防给水装置</view>
          <view class="down-top">
            <span
              :class="six.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">消防给水设施</span>
              <span class="info">
				  <el-select v-model="six.xfgs" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">消防水池</span>
              <span class="info">
				  <el-input v-model="six.xfsc" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">消防水箱</span>
              <span class="info">
				  <el-input v-model="six.xfsx" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">消防水泵</span>
              <span class="info">
				  <el-select v-model="six.xfsb" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">室内消火栓</span>
              <span class="info">
				  <el-input v-model="six.snxhs" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">室外消火栓</span>
              <span class="info">
				  <el-select v-model="six.swxhs" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">水泵接合器</span>
              <span class="info">
				  <el-select v-model="six.sbjh" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">稳压设施</span>
              <span class="info">
				  <el-select v-model="six.wyss" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">其他设施</span>
              <span class="info">
				  <el-input v-model="six.qtss" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">抽查部位</span>
              <span class="info">
				  <el-input v-model="six.ccbw" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info">
				  <el-input
				    type="textarea"
				    :autosize="{ minRows: 2}"
				    placeholder="请输入内容"
				    v-model="six.textarea2">
				  </el-input>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
					<el-upload
					  action="https://jsonplaceholder.typicode.com/posts/"
					  list-type="picture-card"
					  :on-preview="handlePictureCardPreview"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="seven.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content"  @click="seven.state = !seven.state">
          <view class="menu-title">消防设施器材-自动灭火系统</view>
          <view class="down-top">
            <span
              :class="seven.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">自动喷水灭火系统</span>
              <span class="info">
				  <el-select v-model="seven.zdps" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">其他自动灭火系统</span>
              <span class="info">
				  <el-select v-model="seven.qtzd" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
						<el-upload
						  action="https://jsonplaceholder.typicode.com/posts/"
						  list-type="picture-card"
						  :on-preview="handlePictureCardPreview"
						  :on-remove="handleRemove">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
						  <img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="eight.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content"  @click="eight.state = !eight.state">
          <view class="menu-title">消防设施器材-其他设施器材</view>
          <view class="down-top">
            <span
              :class="eight.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">防火门：</span>
              <span class="info">
				  <el-select v-model="eight.fhm" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">防火卷帘</span>
              <span class="info">
				  <el-select v-model="eight.fhnj" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">防排烟设施</span>
              <span class="info">
				  <el-select v-model="eight.fpys" placeholder="请选择">
				      <el-option
				        v-for="item in options_Four"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				      </el-option>
				    </el-select>
			  </span>
            </li>
            <li>
              <span class="title">灭火器</span>
              <span class="info">
				  <el-input v-model="eight.mhq" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">其他设施</span>
              <span class="info">
				 <el-input v-model="eight.qtss" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">抽查部位</span>
              <span class="info">
				  <el-input v-model="eight.ccbw" placeholder="请输入内容"></el-input>
			  </span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info">
				  <el-input
				    type="textarea"
				    :autosize="{ minRows: 2}"
				    placeholder="请输入内容"
				    v-model="eight.textarea2">
				  </el-input>
			  </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
				<el-upload
				  action="https://jsonplaceholder.typicode.com/posts/"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove">
				  <i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
            </view>
          </view>
        </view>
      </view>
      <view :class="nine.state? 'applicant-wrapper' : 'applicant-wrapper-two'">
        <view class="menu-content content"  @click="nine.state = !nine.state">
          <view class="menu-title">其他消防安全管理</view>
          <view class="down-top">
            <span
              :class="nine.state ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info"></view>
        <ul>
          <li>
            <span class="title">电器产品的线路定期维护、检测</span>
            <span class="info">
				<el-select v-model="nine.dqcp" placeholder="请选择">
				    <el-option
				      v-for="item in options_One"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</span>
          </li>
          <li>
            <span class="title">燃气用具的管路定期维护、检测</span>
            <span class="info">
				<el-select v-model="nine.rqyj" placeholder="请选择">
				    <el-option
				      v-for="item in options_One"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</span>
          </li>
          <li>
            <span class="title"
              >违反规定使用明火作业或在具有火灾、爆炸危险场所吸烟、使用明火</span
            >
            <span class="info">
				<el-select v-model="nine.wfgd" placeholder="请选择">
				    <el-option
				      v-for="item in options_One"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</span>
          </li>
          <li>
            <span class="title"
              >违反消防安全规定进入生产、存储易燃易爆危险品场所</span
            >
            <span class="info">
				<el-select v-model="nine.wfxf" placeholder="请选择">
				    <el-option
				      v-for="item in options_One"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</span>
          </li>
          <li>
            <span class="title"
              >违反有关消防技术标准和管理规定生产、存储、运输、销售、使用、销毁易燃易爆危险品</span
            >
            <span class="info">
				<el-select v-model="nine.wfyg" placeholder="请选择">
				    <el-option
				      v-for="item in options_One"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</span>
          </li>
          <li>
            <span class="title">其他情况</span>
            <span class="info">
				<el-input
				  type="textarea"
				  :autosize="{ minRows: 2}"
				  placeholder="请输入内容"
				  v-model="nine.textarea2">
				</el-input>
			</span>
          </li>
        </ul>
        <view class="Site">
          <span class="info Site-title">现场照片</span>
          <view class="Site-photos">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </view>
        </view>
      </view>
      <view class="kongge"></view>
      <view class="footer">
        <view class="content">
          <span class="title">检查结果</span>
          <span class="info">
			   <el-input v-model="footer.jcjg" placeholder="请输入内容"></el-input>
		  </span>
        </view>
        <view class="content">
          <span class="title">当事人拒绝签字</span>
          <span class="info">
			  <el-select v-model="footer.dsrj" placeholder="请选择">
			      <el-option
			        v-for="item in options_Five"
			        :key="item.value"
			        :label="item.label"
			        :value="item.value">
			      </el-option>
			    </el-select>
		  </span>
        </view>
        <view class="content">
          <span class="title">备注</span>
          <span class="info">
			   <el-input v-model="footer.bz" placeholder="请输入内容"></el-input>
		  </span>
        </view>
      </view>
      <view class="inspector">
       <view class="applicant-title">
            <view class="strip"></view>
            <view class="menu-title people">被检查单位随同检查人员（签名）:</view>
      </view>
      <view class="autograph">
          <view class="autograph-photos">
			 <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
			        <view class="foot">
			            <view class="left" @click="finish">完成</view>
			            <view class="right" @click="clear">清除</view>
			        </view>
          </view>
        </view>
        <view class="kongge2"></view>
       <view class="applicant-title">
            <view class="strip"></view>
            <view class="menu-title people"></view>
            <view class="menu-title people">主/协检查人员（签名）:</view>
      </view>
      <view class="autograph">
          <view class="autograph-photos">
				 <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
				        <view class="foot">
				            <view class="left" @click="finish">完成</view>
				            <view class="right" @click="clear">清除</view>
				        </view>
          </view>
        </view>
      </view>
    </view>
	<button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
	 var x = 20;
	 var y =20;
export default {
  data() {
    return {
		   ctx:'',         //绘图图像
		   points:[],       //路径点集合
		    dialogImageUrl: '',
		    dialogVisible: false,
      State: 1,
	  input: '',
	  header:{
		  jibie: '',
		  jcxs: '',
		  xfjd: '',
		  jcsj: ''
	  },
	  one:{
		    xfaq: '',
			mhhy: '',
			ygxf: '',
			xfaqglr: '',
			fhjc: '',
			xfss: '',
			xfyl: '',
			xfda: '',
			xfzd: '',
			zdmh: '',
			qtqk: '',
			textarea2: '',
			state: true,
				  },
	two: {
		sccc: '',
		sccctwo:'',
		rymj: '',
		xfct: '',
		fhjj: '',
		fhfq: '',
		rymjtwo: '',
		textarea2: '',
		state: true,
	},
	three: {
		sstd: '',
		aqck: '',
		yjzm: '',
		sszs: '',
		bnc: '',
		yjgb: '',
		textarea2: '',
		state: true,
	},
	four: {
		xfkzs: '',
		state: true,
	},
	five: {
		hzzd: '',
		tcq: '',
		sdbj: '',
		qtsb: '',
		kzsb: '',
		qtss: '',
		ccbw: '',
		textarea2: '',
		state: true,
	},
	six: {
		xfgs: '',
		xfsc: '',
		xfsx: '',
		xfsb: '',
		snxhs: '',
		swxhs: '',
		sbjh: '',
		wyss: '',
		qtss: '',
		ccbw: '',
		textarea2: '',
		state: true,
	},
	seven: {
		zdps: '',
		qtzd: '',
		state: true,
	},
	eight: {
		fhm: '',
		fhnj: '',
		fpys: '',
		mhq: '',
		qtss: '',
		ccbw: '',
		textarea2: '',
		state: true,
	},
	nine: {
		dqcp: '',
		rqyj: '',
		wfgd: '',
		wfxf: '',
		wfyg: '',
		textarea2: '',
		state: true,
	},
	footer: {
		jcjg: '',
		dsrj: '',
		bz: '',
	},
	   options_One: [{
	            value: '选项1',
	            label: '涉及'
	          }, {
	            value: '选项2',
	            label: '不涉及'
	          }],
		options_Two: [{
		            value: '选项1',
		            label: '有记录'
		          }, {
		            value: '选项2',
		            label: '无记录'
		          }],
		options_Three: [{
		            value: '选项1',
		            label: '确定'
		          }, {
		            value: '选项2',
		            label: '不确定'
		          }],
		options_Four: [{
		            value: '选项1',
		            label: '有'
		          }, {
		            value: '选项2',
		            label: '无'
		          }],
		options_Five: [{
		            value: '选项1',
		            label: '是'
		          }, {
		            value: '选项2',
		            label: '否'
		          }],
    };
  },
  
  onLoad() {
              this.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象
               
              //设置画笔样式
              this.ctx.lineWidth = 4;
              this.ctx.lineCap = "round"
              this.ctx.lineJoin = "round"
          },
  methods: {
    changestate() {
      this.State = !this.State;
    },
	 handleRemove(file, fileList) {
	        console.log(file, fileList);
	      },
	      handlePictureCardPreview(file) {
	        this.dialogImageUrl = file.url;
	        this.dialogVisible = true;
	      },
		// 签名
	touchstart:function(e){
	               let startX = e.changedTouches[0].x;
	               let startY = e.changedTouches[0].y;
	               let startPoint = {X:startX,Y:startY};
	                
	               /* **************************************************
	                   #由于uni对canvas的实现有所不同，这里需要把起点存起来
	                * **************************************************/
	               this.points.push(startPoint);
	                
	               //每次触摸开始，开启新的路径
	               this.ctx.beginPath();
	           },
	            
	           //触摸移动，获取到路径点
	           touchmove:function(e){
	               let moveX = e.changedTouches[0].x;
	               let moveY = e.changedTouches[0].y;
	               let movePoint = {X:moveX,Y:moveY};
	               this.points.push(movePoint);       //存点
	               let len = this.points.length;
	               if(len>=2){
	                   this.draw();                   //绘制路径
	               }
	                
	           },
	            
	           // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
	           touchend:function(){                  
	               this.points=[];
	           },
			  draw: function() {
					let point1 = this.points[0]
					    let point2 = this.points[1]
					    this.points.shift()
					    this.ctx.moveTo(point1.X, point1.Y)
					    this.ctx.lineTo(point2.X, point2.Y)
					    this.ctx.stroke()
					    this.ctx.draw(true)
					},
					             
			 //清空画布
			 clear:function(){
			     let that = this;
			     uni.getSystemInfo({
			         success: function(res) {
			             let canvasw = res.windowWidth;
			             let canvash = res.windowHeight;
			             that.ctx.clearRect(0, 0, canvasw, canvash);
			             that.ctx.draw(true);
			         },
			     })
			 },
			  
			 //完成绘画并保存到本地
			 finish:function(){
			     uni.canvasToTempFilePath({
			       canvasId: 'mycanvas',
			       success: function(res) {
			         let path = res.tempFilePath;
			         uni.saveImageToPhotosAlbum({
			             filePath:path
			         })
			       }
			     })
			 },
			 //签名
			 submit() {
				const taskData = {
					header: this.header,
					one: this.one,
					two: this.two,
					three: this.three,
					four: this.four,
					five: this.five,
					six: this.six,
					seven: this.seven,
					eight: this.eight,
					nine: this.nine,
					footer: this.footer
				}
				console.log(taskData)
			 }
								
  },
  computed: {
    classtype() {
      return this.State ? "applicant-wrapper" : "applicant-wrapper-two";
    },
    Statetype() {
      return this.State ? "down" : "up";
    },
  },
};
</script>
<style scoped>
.home {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 头部 */
.header {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #efefef;
  color: #1a1a1a;
  position: fixed;
  top: 0;
}
.icon-cuowu {
  font-size: 30px;
  margin-left: 10px;
}
.icon-caidan_2 {
  font-size: 25px;
  margin-right: 10px;
}
.header .hearder-title {
  font-size: 20px;
}
/* 头部 */

.main .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;
}

/* 公共样式 */
.title {
  text-align: left;
  margin-left: 10px;
  font-weight: 500;
  min-height: 30px;
  width: 50%;
}
.info {
  margin-right: 10px;
  color: #8b8b8b;
  min-height: 30px;
  text-align: right;
  width: 40%;
}
.info-two {
	margin-right: 10px;
	color: #8b8b8b;
	min-height: 30px;
	text-align: right;
	width: 60%;
}
.info .el-select {
	padding-top: 3px;
	max-width: 100px;
	
}
/deep/ .el-input__inner {
	height: 25px;
	line-height: 25px;
	border: 0;
}
/deep/ .el-textarea__inner {
	border: 0;
	padding: 0px 0px 0px 15px;
}
/* 公共样式 */

/* 菜单箭头翻转 */
.applicant-wrapper {
  height: 30px;
  overflow: hidden;
  transition: height 0.5s;
}
.main .applicant-wrapper-two {
  transition: height 0.5s;
  overflow: hidden;
  min-height: 30px;
}
.main .menu-content .down-top {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  float: right;
}
.icon-jiantou_liebiaozhankai_o {
  font-size: 40px;
  color: #999;
  margin-right: 10px;
}
.main .menu-content .down-top .down {
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}
.main .menu-content .down-top .up {
  transform: rotate(180deg);
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}
/* 菜单箭头翻转 */

.main .menu-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.main .menu-content .menu-title {
  text-align: left;
  margin-left: 10px;
  font-weight: 500;
  min-height: 30px;
}
ul {
	padding-left: 0;
}
ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;
  margin-left: 15px;
  margin-right: 10px;
}
.Site {
  text-align: left;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 10px;
}
.Site .Site-title {
  padding-left: 25px;
  font-size: 14px;
}
.Site .Site-photos {
  margin-top: 10px;
  margin-left: 30px;
  width: 60%;
}
.Site .Site-photos img {
	padding-left: 10px;
  width: 60px;
  height: 60px;
}

.kongge {
  height: 30px;
  background: #efefef;
  margin-top: 10px;
}
.applicant-title {
  height: 40px;
  display: flex;
  font-size: 14px;
  font-weight: bold;
  flex-direction: row;
  align-items: center;
}
.strip {
  margin-left: 3px;
  height: 25px;
  width: 3px;
  background: #52adfc;
}
.people{
  margin-left: 5px;
  
}
.autograph {
  text-align: left;
  padding-bottom: 20px;
}
.autograph .autograph-photos img {
  width: 30%;
  height: 60px;
  margin-left: 25px;
}
.kongge2 {
  height: 10px;
  background: #efefef;
}
.mycanvas{
        width: 100%;
        height: calc(50vh - 200upx);
        background-color: #eee;
		margin-bottom: 10px;
    }
.foot{
        font-size: 16px;
        height: 50upx;
        display: flex;
		flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
  .left,.right{
        line-height: 50upx;
        height: 50upx;
        width: 250upx;
        text-align: center;
        font-weight: bold;
        color: white;
        border-radius: 5upx;
    }
    .left{
        background: #007AFF;
    }
    .right{
        background:orange;
    }
</style>
